<template>
	<div class='modal-content'>
		<div class='modal-header'>
			<span class='header-title'>账号密码</span>
			<span type='clear' size='20' bindtap="_hiddenModel"></span>
		</div>

		<div class='modal-body'>
			<form class='form-group'>
				<div class='input-group'>
					<img class='icon-login' src='../../../../static/img/account.svg' />
					<input type='number' placeholder='请输入手机号' class='input-box' data-name="loginData.member_mobile" bindinput='_changeInputValue'></input>
				</div>
				<div class='input-group'>
					<img class='icon-login' src='../../../../static/img/password.png' />
					<input type='password' placeholder='请输入密码' class='input-box' data-name="loginData.member_passwd" bindinput='_changeInputValue'></input>
				</div>
				<div class='input-btn-group'>
					<button class='login-btn' catchtap='_loginPassword'>登录</button>
				</div>
				<div class='tab-btn'>
					<span class='' @click='goPhoneLogin'>手机验证码登录</span>
					<div class='triangle'></div>
				</div>
			</form>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			goPhoneLogin(){
				this.$emit("userPhoneCodeChoose",true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-content {
		width: 670px;
		background-color: #fff;
		border-radius: 8px;
		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40px 50px 10px;
			.header-title {
				font-family: PingFangSC-Regular;
				font-size: 40px;
				color: #4A4A4A;
				letter-spacing: 0.43px;
				text-align: left;
			}
		}
		.modal-body {
			padding: 0 50px;
			.form-group {
				.input-group {
					position: relative;
					display: flex;
					height: 100px;
					align-items: center;
					box-shadow: 0 2px #e5e5e5;
					padding-bottom: 30px;
					padding-top: 45px;
					.icon-login {
						flex-shrink: 0;
						width: 40px;
						height: 40px;
						margin-right: 20px;
					}
					.input-box {
						padding-left: 20px;
						padding-right: 20px;
						font-size: 30px;
						color: #9b9b9b;
					}
					.send-code-btn {
						position: absolute;
						right: 0;
						overflow: hidden;
						flex-shrink: 0;
						width: 180px;
						height: 70px;
						text-align: center;
						line-height: 70px;
						color: #4a4a4a;
						font-size: 28px;
						border: 2px solid #e6e6e6;
						border-radius: 4px;
						box-sizing: border-box;
					}
				}
				.input-btn-group {
					padding: 50px 0;
					.login-btn {
						width: 549px;
						height: 88px;
						color: #fff;
						font-size: 30px;
						background: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
						box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
						border-radius: 8px;
					}
				}
				.tab-btn {
					padding-bottom: 50px;
					display: flex;
					justify-content: center;
					align-items: center;
					span {
						height: 100%;
						color: #9b9b9b;
						font-size: 30px;
						margin-right: 10px;
					}
					.triangle {
						position: relative;
						width: 0;
						height: 0;
						border-left: 18px solid #68676c;
						border-top: 12px solid transparent;
						border-bottom: 12px solid transparent;
					}
					.triangle::after {
						position: absolute;
						left: -16px;
						top: -8px;
						width: 0;
						height: 0;
						border-left: 12px solid #fff;
						border-top: 8px solid transparent;
						border-bottom: 8px solid transparent;
						content: "";
						z-index: 2000;
					}
				}
			}
		}
	}
</style>